<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/form.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>


    <!--时间日期选择文件依赖-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.css"
        rel="stylesheet">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script
        src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>


</head>

<body>
    <!--HTML-->
    <p class="magic-desc">添加任务</p>
    <form class="bk-form" style="width:600px;" id="validate_form">
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">任务名称</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" placeholder="请输入任务名称">
            </div>
        </div>


        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">任务星级</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <select name="validation_select" class="bk-form-select">
                    <option value="beijing">一星任务</option>
                    <option value="shanghai">一星任务</option>
                    <option value="guangzhou">一星任务</option>
                    <option value="shenzhen">一星任务</option>
                </select>
            </div>
        </div>

        <input type="text" class="form-control daterangepicker_demo" id="daterangepicker_demo3" placeholder="选择日期...">
        <script type="text/javascript">
            // 综合示例
            $('#daterangepicker_demo3').daterangepicker({
                "showDropdowns": true,//显示年，月下拉选择框
                "showWeekNumbers": true,//显示第几周
                "timePicker": true,//时间选择
                "timePicker24Hour": true,//24小时制
                "timePickerIncrement": 1,//时间间隔
                "timePickerSeconds": true,
                "dateLimit": { //可选择的日期范围
                    "days": 30
                },
                "ranges": {
                    "前7天": [moment().subtract(6, 'days'), moment()],
                    "前30天": [moment().subtract(29, 'days'), moment()],
                    "本月": [moment().startOf('month'), moment().endOf('month')],
                    "上个月": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                },
                "locale": {
                    "format": "YYYY-MM-DD HH:mm:ss",// 日期格式
                    "separator": " 至 ",
                    "applyLabel": "确定",
                    "cancelLabel": "取消",
                    "fromLabel": "从",
                    "toLabel": "到",
                    "weekLabel": '周',
                    "customRangeLabel": "自定义",
                    "daysOfWeek": [
                        "日",
                        "一",
                        "二",
                        "三",
                        "四",
                        "五",
                        "六"
                    ],
                    "monthNames": [
                        "一月",
                        "二月",
                        "三月",
                        "四月",
                        "五月",
                        "六月",
                        "七月",
                        "八月",
                        "九月",
                        "十月",
                        "十一月",
                        "十二月"
                    ],
                    "firstDay": 1// 周开始时间
                },
                "startDate": "2015-07-01 10:35:20",
                "endDate": "2015-08-15 10:35:20",
                "opens": "center",//left/center/right
                "drops": "up",//选择框出现的位置 up/down
                "buttonClasses": "btn btn-sm",//按钮通用样式
                "applyClass": "btn-success",//确定按钮样式
                "cancelClass": "btn-default"//取消按钮样式
            });
        </script>

        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">备注</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <textarea name="" id="" class="bk-form-textarea" placeholder=""></textarea>
            </div>
        </div>


        <div class="bk-form-item bk-form-action">
            <div class="bk-form-content" style="margin-left:150px;">
                <a class="bk-button bk-primary" id="submit" title="保存">
                    <span>保存</span>
                </a>
                <a class="bk-button" title="取消">
                    <span>取消</span>
                </a>
            </div>
        </div>


    </form>
    <div class="input-group date" id="plugin9_demo1" data-date="2015-01-01T09:00:07Z"
        data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
        <input class="form-control" size="16" type="text" value="" placeholder="选择日期范围">
        <input type="hidden" id="dtp_input1" value="">
        <br>
    </div>
    <script type="text/javascript">
        // 日期选择器(Bootstrap)-1，日期时间选择
        $('#plugin9_demo1').datetimepicker({
            language: 'zh-TW',
            weekStart: 1,
            todayBtn: true,
            autoclose: true,
            todayHighlight: true,
            startView: 2,
            forceParse: false,
        });
    </script>


</body>

</html>